<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 300px;
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div id="box" class="box">
    <h1 id="num"></h1>
  </div>
</body>

</html>
<script>
  /* 
  防抖：如果一段时间内 同一事件频繁的发生 以最后一次为准 
  节流：如果一段时间内 同一事件频繁的发生 按照一定时间的规律执行
   */
  let num = 0
  /*
  防抖函数
  */
  // document.getElementById('box').addEventListener('mousemove', function () {
  //   debounce(function () {
  //     document.getElementById('num').innerHTML = num++
  //   }, 1000)
  // })

  // function debounce(fn, duration) {
  //   if (window.timeId) {
  //     clearTimeout(window.timeId)
  //     window.timeId = null
  //   }
  //   window.timeId = setTimeout(fn, duration)
  // }
  /* 节流 规律执行 */
  document.getElementById('box').addEventListener('mousemove', function () {
    throttle(function () {
      document.getElementById('num').innerHTML = num++
    }, 1000)
  })

  function throttle(fn, duration) {
    if (!window.timeId) {
      window.timeId = setTimeout(function(){
        window.timeId = null
        fn.call(this)
      }, duration)
    }
  }
</script>